<style scoped>
.m-4 {
    margin-bottom: 20px;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block {
    position: relative;
    left: 310px;
    top: 20px;
}
</style>
<template>
    <!-- 筛选栏 -->
    <div>
        <div class="m-4">
            <el-form ref="ruleFormRef" :model="empDataStore.ruleForm">
                <el-cascader v-model="empDataStore.ruleForm.city" :options="cityOptions" :props="props"
                    @change="handleChange" prop: placeholder="选择城市" />
                &nbsp;&nbsp;&nbsp;&nbsp;
                <el-select v-model="empDataStore.ruleForm.experience" clearable placeholder="工作经验"
                    @change="changeExperience()">
                    <el-option v-for="item in experienceOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <el-select v-model="empDataStore.ruleForm.salary" clearable placeholder="薪资待遇"
                    @change="changeExperience()">
                    <el-option v-for="item in salaryOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <el-select v-model="empDataStore.ruleForm.education" clearable placeholder="学历要求"
                    @change="changeExperience()" style="width: 180px;">
                    <el-option v-for="item in educationOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
                <el-select v-model="empDataStore.ruleForm.classify" clearable placeholder="岗位分类"
                    @change="changeExperience()" style="width: 180px;margin-left: 20px;">
                    <el-option v-for="item in classifyOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <el-button @click="empDataStore.resetForm">重置</el-button>
            </el-form>
        </div>
    </div>
    <div style="height: 100%; width: 100%;overflow-x: hidden;">
        <!-- 表格 -->
        <el-table :data="empDataStore.tableData" style="height: 80%; width: 100%;">
            <el-table-column prop="position" label="岗位名称" width="160" align="center" />
            <el-table-column prop="company" label="公司名称" width="140" align="center" />
            <el-table-column prop="city" label="工作城市" width="120" align="center" />
            <el-table-column prop="education" label="学历要求" width="80" align="center" />
            <el-table-column prop="experience" label="经验要求" width="80" align="center" />
            <el-table-column prop="salary" label="薪资" width="80" align="center" />
            <el-table-column prop="scale" label="公司规模" width="100" align="center" />
            <el-table-column prop="responsibility" label="岗位职责" show-overflow-tooltip="false" align="center" />
        </el-table>
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="empDataStore.currentPage" v-model:page-size="empDataStore.pageSize"
                :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="empDataStore.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { provinceAndCityData, CodeToText } from 'element-china-area-data'
// 通过pinia获得顶部搜索框的值
import { useEmpDataStore } from '../../stores/empDataStore';
const empDataStore = useEmpDataStore()

const cityOptions = ref([])
onMounted(() => {
    empDataStore.getPageList()
        // 筛选出所需省份的数据
        cityOptions.value = provinceAndCityData.filter(province => 
        ['广东省', '福建省', '海南省', '广西壮族自治区', '贵州省', '云南省'].includes(province.label)
    )
})
const handleSizeChange = (val: number) => {
    // console.log(`${val} items per page`)
    empDataStore.pageInfo.size = val
    empDataStore.pageInfo.current = 1
    empDataStore.currentPage = 1
    empDataStore.getPageList()
}
const handleCurrentChange = (val: number) => {
    // console.log(`current page: ${val}`)
    empDataStore.pageInfo.current = val
    empDataStore.getPageList()
}

const changeExperience = () => {
    empDataStore.pageInfo.experience = empDataStore.ruleForm.experience
    empDataStore.pageInfo.education = empDataStore.ruleForm.education
    empDataStore.pageInfo.salary = empDataStore.ruleForm.salary
    empDataStore.pageInfo.classify = empDataStore.ruleForm.classify
    // 重置页码和条数
    empDataStore.currentPage = 1
    empDataStore.pageSize = 10
    empDataStore.getPageList()
}


// 城市筛选
const props = {
    expandTrigger: 'hover' as const,
}
// 城市变化时触发
const handleChange = (value) => {
    // 获取到选中的城市 格式：广东省-广州市 or 北京市-市辖区
    empDataStore.citys = CodeToText[empDataStore.ruleForm.city[0]] + '-' + CodeToText[empDataStore.ruleForm.city[1]]
    // 重置页码和条数
    empDataStore.currentPage = 1
    empDataStore.pageSize = 10
    empDataStore.getPageList()
}


// 工作经验筛选
const experienceOptions = [
    {
        value: '1年以上',
        label: '1年以上',
    },
    {
        value: '经验不限',
        label: '经验不限',
    },
    {
        value: '5年以上',
        label: '5年以上',
    },
    {
        value: '3年以上',
        label: '3年以上',
    },
    {
        value: '2年以上',
        label: '2年以上',
    },
    {
        value: '10年以上',
        label: '10年以上',
    },
    {
        value: '在校/应届',
        label: '在校/应届',
    }
]

// 薪资待遇筛选
const salaryOptions = [
    {
        value: '3000-5000',
        label: '3-5k',
    },
    {
        value: '5000-10000',
        label: '5-10k',
    },
    {
        value: '10000-20000',
        label: '10-20k',
    },
    {
        value: '20000-50000',
        label: '20-50k',
    },
    {
        value: '50000',
        label: '50k以上',
    }
]

// 学历要求筛选
const educationOptions = [
    {
        value: '本科',
        label: '本科',
    },
    {
        value: '专科',
        label: '专科',
    },
    {
        value: '硕士',
        label: '硕士',
    },
    {
        value: '学历不限',
        label: '学历不限',
    },
    {
        value: '中专',
        label: '中专',
    },
    {
        value: '高中',
        label: '高中',
    },
    {
        value: '博士',
        label: '博士',
    }
]

const classifyOptions = [
    {
        value: '大数据工程师',
        label: '大数据工程师'
    },
    {
        value: '运营工程师',
        label: '运营工程师'
    },
    {
        value: '开发工程师',
        label: '开发工程师'
    },
    {
        value: '算法工程师',
        label: '算法工程师'
    },
    {
        value: '运维工程师',
        label: '运维工程师'
    },
    {
        value: '大数据架构师',
        label: '大数据架构师'
    },
    {
        value: '大数据讲师',
        label: '大数据讲师'
    },
    {
        value: '数据分析工程师',
        label: '数据分析工程师'
    },
    {
        value: '大数据治理工程师',
        label: '大数据治理工程师'
    },
    {
        value: '数据挖掘工程师',
        label: '数据挖掘工程师'
    },
    {
        value: '数据采集工程师',
        label: '数据采集工程师'
    },
    {
        value: '其它',
        label: '其它'
    }
];
</script>